<template>
	<div class='list'>
		<header v-show='isShow'>

			<van-nav-bar left-arrow @click-left="goBack">
				<template #right>
					<van-icon name="search" @click="goSearch" />
				</template>
			</van-nav-bar>
		</header>
		<section>
			<div class='list-l' ref='left'>
				<ul class='l-item'>
					<li v-for='(item, index) in leftData' :key='index' :class='{ active: index == currentIndex }'
						@click="goScroll(index)">{{ item.name }}</li>
				</ul>
			</div>

			<div class='list-r' ref='right'>
				<div>
					<ul v-for='(item, index) in rightData' :key='index' class='shop-list'>
						<li v-for="(k, i) in item" :key='i'>
							<h2>{{ k.name }}</h2>
							<ul class='r-content'>
								<li v-for='(j, idx) in k.list' :key='idx' @click="goDetail(j.id)">
									<img :src="j.imgUrl" alt="">
									<span>{{ j.class }}</span>
								</li>
							</ul>
						</li>
					</ul>
					<div class="kong"></div>
				</div>
			</div>

		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
import BetterScroll from 'better-scroll'
import Tabbar from '@/components/common/Tabbar.vue'
import http from '@/common/api/request.js'
export default {
	name: "List",
	data() {
		return {
			isShow: true,
			leftData: [],//左侧数据
			rightData: [],//右侧数据
			rightBScroll: '',//右侧滑动BScroll
			allHeight: [],//承载右侧每一块的高度值
			scrollY: ''//右侧滚动距离
		}
	},
	computed: {
		currentIndex() {
			return this.allHeight.findIndex((item, index) => {
				return this.scrollY >= item && this.scrollY < this.allHeight[index + 1]
			})
		}
	},
	components: {
		Tabbar
	},
	async created() {

		let res = await http.$axios({
			url: '/api/goods/list',
		})

		let leftArr = [];
		let rightArr = [];

		res.forEach(v => {
			leftArr.push({
				id: v.id,
				name: v.name
			})
			rightArr.push(v.data);
		})
		this.leftData = leftArr;
		this.rightData = rightArr;

		this.$nextTick(() => {
			//左侧滑动
			new BetterScroll(this.$refs.left, {
				click: true,
				bounce: false
			});
			//右侧滑动
			this.rightBScroll = new BetterScroll(this.$refs.right, {
				click: true,
				probeType: 3,
				bounce: false
			});
			//统计右侧所有板块高度值，并且放入数组中
			let height = 0;
			this.allHeight.push(height);
			//获取右侧每一块高度
			let uls = this.$refs.right.getElementsByClassName('shop-list');
			//把dom对象转换成功真正的数组
			Array.from(uls).forEach(v => {
				height += v.clientHeight
				this.allHeight.push(height)
			})
			//得到右侧滚动的值
			this.rightBScroll.on('scroll', (pos) => {
				this.scrollY = Math.abs(pos.y);
				if (Math.abs(pos.y) >= 50) {
					this.isShow = false;
				} else {
					this.isShow = true;
				}
			})

		})
	},
	methods: {
		goScroll(index) {
			this.rightBScroll.scrollTo(0, -this.allHeight[index], 300);
		},
		goBack() {
			this.$router.back()
		},
		goSearch() {
			this.$router.push('/search')
		},
		goDetail(id) {
			this.$router.push({
				path: '/detail',
				query: {
					id
				}
			})
		}
	}
};
</script>

<style scoped>
.list {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

header {
	/* display: flex; */
	/* justify-content: space-between; */
	/* align-items: center; */
	height: 1.473333rem;
	/* background-color: #1b1b1b; */
}

header ::v-deep .van-nav-bar__content {
	background-color: #fff;
}

header ::v-deep .van-nav-bar .van-icon {
	color: #1b1b1b;
	font-size: 0.593333rem;
}



header .go-home {
	padding: 0 0.266666rem;
	line-height: 0.173333rem;
}

header .go-home img {
	width: 0.88rem;
	height: 0.88rem;
}

section {
	display: flex;
	flex: 1;
	overflow: hidden;
}

.list-l {
	width: 2.48rem;
	background-color: #fff;
	border-right: 1px solid #CCCCCC;
	overflow: hidden;
}

.l-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.l-item li {
	width: 100%;
	padding: 0.08rem 0;
	margin: 0.533333rem 0;
	text-align: center;
	font-size: 0.373333rem;
}

.active {
	color: #ccc;
	border-left: 6px solid #ccc;
}

.list-r {
	flex: 1;
	overflow: hidden;
}

.shop-list {
	text-align: center;
}

.r-content {
	display: flex;
	flex-wrap: wrap;
}

.r-content li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 33.33%;
	padding: 0.266666rem 0;
}

.r-content li img {
	width: 1.413333rem;
	height: 1.413333rem;
}

.r-content li span {
	font-size: 0.426666rem;
}

.shop-list h2 {
	padding: 0.533333rem 0;
	font-size: 0.64rem;
	font-weight: 400;
}

::v-deep.tabbar {
	border-top: 1px solid #CCCCCC;
}

.kong {
	width: 100%;
	height: 80vh;
}
</style>